import { Component, Prop, Vue } from 'vue-property-decorator'
import { sourceData , sourceDataPie , guides , scale } from './mock'
const DataSet = require('@antv/data-set');

@Component({
  template: require('./chart.html')
})
export default class ChartComponent extends Vue {
  @Prop({
    default: 'Default Value'
  })
  message: string;

  @Prop({
    default: 'line'
  })
  type: string;

  // @Prop()
  data: any;

  // @Prop()
  guides: any = guides

  // @Prop()
  scale: any = scale

  pieStyle: any;

  labelConfig: any;

  height: number = 440

  padding: number[] = [50]

  created () {
    console.log('this.type => ', this.type);
    let data: any;
    let dv;

    if (this.type === 'pie') {
      data = sourceDataPie
      this.scale = {
        dataKey: 'percent',
        min: 0,
        formatter: '.0%',
      }
      this.pieStyle = {
        stroke: '#fff',
        lineWidth: 1
      }

      this.labelConfig = ['percent', {
        formatter: (val: any, item: any) => {
          return item.point.item + ': ' + val;
        }
      }]

      dv = new DataSet.View().source(data);
      dv.transform({
        type: 'percent',
        field: 'count',
        dimension: 'item',
        as: 'percent'
      });
      this.height = 300
      this.data = dv.rows;
    } else {
      data = sourceData
      dv = new DataSet.View().source(data);
      this.data = dv.rows;
    }
  }
}
